import styles from './index.less';
import React from 'react';
import { Layout, Tooltip } from 'antd';
const { Header } = Layout;
import classNames from 'classnames/bind';
let cx = classNames.bind(styles);
import { history, connect } from 'umi';
import { getUrl } from '@/utils/common';
import { RollbackOutlined } from '@ant-design/icons';
import avatar from '@/assets/avatar.png';
import actions from '@/shared/actions';

const Index = (props: any) => {

  // 回到首页
  const goHome = () => {
    props.dispatch({
      type: 'common/save',
      payload: {
        presentApp: {},
        count: 0,
      },
    });
    history.push('/Home');
  };

  // 退出到登录页
  const goLogin = () => {
    window.localStorage.setItem('token', '');
    history.push('/');
    location.reload();
  };

  return (
    <Header className={cx({ header: true })}>
      <div className={cx({ box: true })}>
        <div className={cx({ 'box-leftContent': true })}>
          <div>微前端基座</div>
          <div className={cx({ 'box-leftContent-t1': true })} onClick={goHome}>
            <Tooltip placement="bottom" title={'回到工作台'} color={'red'}>
              <RollbackOutlined />
            </Tooltip>
          </div>

          {getUrl() !== 'Home' && (
            <div className={cx({ 'box-leftContent-t2': true })}>
              {props.common.presentApp.title}
            </div>
          )}
        </div>
        <div className={styles.right}>
          <Tooltip placement="bottom" title={'退出登录'} color={'red'}>
            <img onClick={goLogin} src={avatar} />
          </Tooltip>
        </div>
      </div>
    </Header>
  );
};

export default connect(({ common }: any) => ({ common }))(Index);
